<template>
  <div class="listhd">
    <div class="listhdc">
      <h4>
        播放列表(<span>{{ le }}</span
        >)
      </h4>
      <a href="javascript:;" class="addall"><span class="ico icon-add"></span>收藏全部</a>
      <span class="line"></span>
      <a href="javascript:;" class="clear"><span class="ico icn-del"></span>清除</a>
      <p class="lytit">假面舞会</p>
      <span class="close" @mouseup.stop="ShutDown">关闭</span>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  name: "FloorSongListHead",
  setup() {
    const store = useStore();
    const le = computed(() =>
      store.state.SongList.songlist !== null ? store.state.SongList.songlist.length : 0
    );
    function ShutDown() {
      if (!store.state.SongVolume.volumeShow) {
        const body = document.body;
        body.onmouseup = null;
      }
      store.commit("SongList/changFlag", false);
    }

    return {
      ShutDown,
      le,
    };
  },
};
</script>

<style scoped lang="less">
.listhd {
  padding: 0 5px;
  height: 41px;
  background: url(../../../common/images/playlist_bg.png) no-repeat 0 0;
}
.listhdc {
  position: relative;
  height: 40px;
  h4 {
    position: absolute;
    left: 25px;
    top: 0;
    height: 39px;
    line-height: 39px;
    font-size: 14px;
    color: #e2e2e2;
  }
  a {
    color: #ccc;
  }
}
.addall {
  position: absolute;
  left: 398px;
  top: 12px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  &:hover {
    color: #fff;
    .icon-add {
      background-position: -24px -20px;
    }
  }
  .icon-add {
    width: 16px;
    background-position: -24px 0;
  }
}

.line {
  position: absolute;
  top: 13px;
  left: 477px;
  height: 15px;
  border-left: 1px solid #000;
  border-right: 1px solid #2c2c2c;
}
.clear {
  position: absolute;
  left: 490px;
  top: 12px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  .icn-del {
    width: 13px;
    line-height: 15px;
    background-position: -51px 0;
    cursor: pointer;
  }
  &:hover {
    color: #fff;
    .icn-del {
      background-position: -51px -20px;
    }
  }
}
.ico {
  float: left;
  height: 16px;
  margin: 1px 6px 0 0;
  background: url(../../../common/images/playlist.png) no-repeat 0 -9999px;
}

.lytit {
  position: absolute;
  left: 595px;
  top: 0;
  width: 346px;
  text-align: center;
  height: 39px;
  line-height: 39px;
  color: #fff;
  font-size: 14px;
}
.close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -999px;
  background: url(../../../common/images/playlist.png) no-repeat -195px 9px;
  cursor: pointer;
  &:hover {
    background-position: -195px -21px;
  }
}
</style>
